<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 卡片视图区域 -->
          <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary">添加分类</el-button>
                </el-col>
            </el-row>
          </el-card>

          <!--表格 -->
          <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" expand-type="false" show-index index-text="#" border>
           <!-- 是否有效 -->
            <template slot="isok" slot-scope="scope">
                <i class="el=icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i>
                <i class="el=icon-error" v-else style="color:red"></i>
            </template>
            <!-- 排列 -->
            <template slot="order" slot-scope="scope"> 
                <el-tag size="mini" v-if="(scope.row.cat_level===0)">一级</el-tag>
                <el-tag type="success" size="mini" v-else-if="(scope.row.cat_level===1)">二级</el-tag>
                <el-tag type="warning" size="mini" v-else>三级</el-tag>
            </template>
            <!-- 操作 -->
            <template slot="opt">
                <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
            </template>
          </tree-table>
          <!-- 分页区域 -->
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="querInfo.pagenum"
          :page-sizes="[3, 5, 10, 15]"
          :page-size="querInfo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
    </div>
</template>

<script>
export default { 
    data() {
        return {
            // 4，查询条件
            querInfo:{ 
                type:3,
                pagenum:1,
                pagesize:5

            },
            //1， 商品分类的数据列表，默认为空
            catelist:[],
            // 总数据条数
            total:0,
            columns:[{
                label:'分类名称',
                prop:'cat_name  ',
},{
    label:'是否有效',
    // 表示,将当前定义为模块
    type:'template',
    // 表示当前这一列使用的模板名称
    template:'isok'

},
{
    label:'排序',
    // 表示,将当前定义为模块
    type:'template',
    // 表示当前这一列使用的模板名称
    template:'order'

},
{
    label:'操作',
    // 表示,将当前定义为模块
    type:'template',
    // 表示当前这一列使用的模板名称
    template:'opt'

}]
        };
    },

    created(){
        // 2，
        this.getCateList()  
    },

    methods: {
        //3，获取商品分类数据
       async getCateList(){
        const {data:res} = await this.$http.get('categories',{params:this.querInfo})
        if(res.meta.status !==200) {
            return this.$message.error('获取商品分类失败！')
        }
        
        
        console.log(this.data) 
        //4， 获取数据保存到catelist
        this.catelist = res.data.result
        // 为总数据条数赋值
        this.total = res.data.total
        },
        // 监听
        handleSizeChange(newSize){
            this.querInfo.pagesize = newSize
            this.getCateList()
        },
        // 监听pagenum 改变
        handleCurrentChange(newPage){
            this.querInfo.pagenum = newPage
            this.getCateList()
        },
    },
};
</script>

<style scoped>
.treeTable{
    margin-top: 15px;
}
</style>